
<template>
  <div id='app'>
    <my-header>星座运势</my-header>
    <nav-bar />
    <error-tip v-if='errorCode' :errorCode='errorCode' />
    <router-view v-slot='{Component} ' v-if='!errorCode'>
      <keep-alive>
        <component :is='Component' />
      </keep-alive>
    </router-view>
    <Tab />
  </div>
</template>
<script>
import Tab from '@/components/tab/index.vue'
import MyHeader from '@/components/header/index.vue'
import NavBar from '@/components/navbar/index.vue'
import ErrorTip from '@/components/error/index.vue'
import { watch, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'app',
  components: {
    MyHeader,
    Tab,
    NavBar,
    ErrorTip
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    router.push('/')
    watch(
      () => {
        return router.currentRoute.value.name
      },
      value => {
        store.commit('setType', value)
      }
    )
    return {
      errorCode: computed(() => store.state.errorCode)
    }
  }
}
</script>
<style >
</style>
